% Created 2023-03-06 周一 09:50
% Intended LaTeX compiler: xelatex
\documentclass[a4paper]{article}
                 \usepackage{graphicx}
                 \usepackage{xcolor}
                 \usepackage{xeCJK}
                 \usepackage{fixltx2e}
                 \usepackage{longtable}
                 \usepackage{float}        
                 \usepackage{tikz}         
                 \usepackage{wrapfig}      
                 \usepackage{latexsym,amssymb,amsmath}
                 \usepackage{textcomp}
                 \usepackage{bicaption}
                 \usepackage{listings}     
                \usepackage{marvosym}     
                \usepackage{textcomp}     
                \usepackage{latexsym}     
                \usepackage{natbib}
                \usepackage{indentfirst}
		\usepackage{hyperref}
                \usepackage{geometry}
                \usepackage{minted}
                \usepackage{algpseudocode}
		\usepackage{algorithm}
                \usepackage{algorithmicx}
                \setCJKmainfont{仿宋}
                \setCJKsansfont{Microsoft YaHei}
                \setCJKmonofont{Microsoft YaHei}
                \setlength{\parindent}{2em}
                \usepackage{color}
                \usepackage{fancyhdr}
\pagestyle{fancy}
\fancyhead[R]{\footnotesize{《Android应用程序开发》 广西职业师范学院实验教学指导书}}
\geometry{a4paper,left=2.5cm,right=2.5cm,top=2cm,bottom=2cm}
\setCJKmainfont{Microsoft YaHei}
\setCJKsansfont{Microsoft YaHei}
\setCJKmonofont{Microsoft YaHei}

            \lstset{
  columns=fixed,       
  breaklines=true, breakautoindent=true,breakindent=4em,
  commentstyle=\it\color[RGB]{0,96,96},                %
  stringstyle=\rmfamily\slshape\color[RGB]{128,0,0},   %
  showstringspaces=false,                              %
  language=java,                                        %
}

\usemintedstyle{emacs}
    \setminted{%
        autogobble,% automatically remove the spaces to the left of the code
        linenos=true,% show line numbers
        fontsize=\small,% smaller font size
        % escapeinside=@@,% insert latex code between @ and @
        frame=lines,% frame styles: none or lines
        % frame=none,
        numbers=none,% show line numbers on: left, right, both or none
        mathescape=true,% insert math code
	breaklines=true,
    }%
    \setmintedinline{%
        fontsize=\smallsize,
    }%
\date{\today}
\title{实验三：Android 布局}
\hypersetup{
 pdfauthor={},
 pdftitle={实验三：Android 布局},
 pdfkeywords={},
 pdfsubject={},
 pdfcreator={Emacs 27.1 (Org mode 9.3.8)}, 
 pdflang={English}}
\begin{document}

\maketitle
\tableofcontents

\newpage

\section{实验目的}
\label{sec:orgcc2fed4}
\begin{itemize}
\item 掌握 Android 线性布局的使用
\item 掌握 Android 相对布局的使用
\item 掌握 Android 约束布局的使用
\end{itemize}
\section{实验设备和器件}
\label{sec:org397a5df}
\begin{itemize}
\item PC
\item 内存要求 8G 以上
\end{itemize}
\section{实验内容}
\label{sec:orgadca222}
\subsection{电话闹钟的首页设计}
\label{sec:org2c202c8}
\begin{enumerate}
\item 预期效果
\label{sec:org8da5b71}
\begin{figure}[htbp]
\centering
\includegraphics[width=0.4\textwidth]{./img/screenshot_20220330_231844.png}
\caption{ 电话闹钟的首页设计的布局效果 }
\end{figure} 
\item 整体布局
\label{sec:orgb332081}
页面分为3个部分，第一部分是时间选择，第二部分是电话选择，第三部分
是确定和取消，这3个部分采用垂直线性布局,
新创建一个电话闹钟项目，并修改其布局文件activity\_main.xml为如下:
\lstset{language=XML,label= ,caption= ,captionpos=b,numbers=none}
\begin{lstlisting}
    <?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="match_parent">
<!-- 日期选择栏-->
    <LinearLayout
	android:layout_width="match_parent"
	android:layout_height="wrap_content"
	android:orientation="vertical">
    </LinearLayout>
    <!-- 电话选择栏-->
    <LinearLayout
	android:layout_width="match_parent"
	android:layout_height="wrap_content"
	android:orientation="vertical">
    </LinearLayout>
    <!-- 确认栏-->
    <LinearLayout
	android:layout_width="match_parent"
	android:layout_height="wrap_content"
	android:orientation="vertical">
    </LinearLayout>
</LinearLayout>
\end{lstlisting}
\item 模块布局
\label{sec:orgca8b923}
\begin{enumerate}
\item 在各个模块之间增加分割线条
\item 各个模块中嵌套一个线性水平布局
\end{enumerate}
\item 模块细化
\label{sec:org9132586}
对各个模块进行细化调整:
\begin{enumerate}
\item 通过layout\_margin 属性来调整各组件之间的间距和模块之间的间距。
\item 通过layout\_weight 来调整电话输入框的大小，使其能够占用更多的空间，同时该属性使确定按钮和取消按钮进行等分。
\item 通过android:src 和drawable属性载入不同的资源(注意:要确保res/drawalbe文件架下有图片，如果没有图片，可以选择
mimap文件夹下的图片)。
\end{enumerate}
具体代码如下:
\lstset{language=XML,label= ,caption= ,captionpos=b,numbers=none}
\begin{lstlisting}
    <?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="match_parent">
<!-- 日期选择栏 加图片控件和时间控件-->
    <LinearLayout
	android:layout_width="match_parent"
	android:layout_height="wrap_content"
	android:orientation="vertical">

	<LinearLayout
	    android:layout_width="match_parent"
	    android:layout_height="wrap_content"
	    android:orientation="horizontal">
	    <TimePicker
		android:layout_width="wrap_content"
		android:layout_height="wrap_content"
		android:layout_marginLeft="10dp"></TimePicker>
	</LinearLayout>
    </LinearLayout>

    <!-- 电话选择栏-->
    <LinearLayout
	android:layout_width="match_parent"
	android:layout_height="wrap_content"
	android:orientation="vertical">
	<ImageView
	    android:layout_width="match_parent"
	    android:layout_height="wrap_content"
	    android:src="@drawable/ic_launcher_foreground"/>

    </LinearLayout>
    <!-- 确认栏-->
    <LinearLayout
	android:layout_width="match_parent"
	android:layout_height="wrap_content"
	android:orientation="vertical">

	<LinearLayout
	    android:layout_width="match_parent"
	    android:layout_height="wrap_content"
	    android:orientation="horizontal">
	    <Button
		android:layout_width="wrap_content"
		android:layout_height="wrap_content"
		android:text="button1"/>
	    <Button
		android:layout_width="wrap_content"
		android:layout_height="wrap_content"
		android:text="button2"/>
	</LinearLayout>
    </LinearLayout>
</LinearLayout>
\end{lstlisting}

第三步细化如下:    
\lstset{language=XML,label= ,caption= ,captionpos=b,numbers=none}
\begin{lstlisting}

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="match_parent">
    <ImageView
	android:layout_width="match_parent"
	android:layout_height="5dp"
	android:background="@color/colorPrimary"/>
<!-- 日期选择栏 加图片控件和时间控件-->
    <LinearLayout
	android:layout_width="match_parent"
	android:layout_height="wrap_content"
	android:orientation="vertical">

	<LinearLayout
	    android:layout_width="match_parent"
	    android:layout_height="wrap_content"
	    android:orientation="horizontal">
	    <TimePicker
		android:layout_width="wrap_content"
		android:layout_height="wrap_content"
		android:layout_marginLeft="10dp"></TimePicker>
	</LinearLayout>
    </LinearLayout>
    <ImageView
	android:layout_width="match_parent"
	android:layout_height="5dp"
	android:background="@color/colorPrimary"/>
    <!-- 电话选择栏-->
    <LinearLayout
	android:layout_width="match_parent"
	android:layout_height="wrap_content"
	android:orientation="vertical">
	<ImageView
	    android:layout_width="match_parent"
	    android:layout_height="wrap_content"
	    android:src="@drawable/ic_launcher_foreground"/>

    </LinearLayout>
    <ImageView
	android:layout_width="match_parent"
	android:layout_height="5dp"
	android:background="@color/colorPrimary"/>
    <!-- 确认栏-->
    <LinearLayout
	android:layout_width="match_parent"
	android:layout_height="wrap_content"
	android:orientation="vertical">

	<LinearLayout
	    android:layout_width="match_parent"
	    android:layout_height="wrap_content"
	    android:orientation="horizontal">
	    <Button
		android:layout_width="wrap_content"
		android:layout_height="wrap_content"
		android:text="button1"/>
	    <Button
		android:layout_width="wrap_content"
		android:layout_height="wrap_content"
		android:text="button2"/>
	</LinearLayout>
	</LinearLayout>
    </LinearLayout>
\end{lstlisting}

\item 程序运行及效果
\label{sec:org3e92531}
\begin{itemize}
\item 编译工程，并在自己的手机上运行，查看运行的效果
\item 作业的提交：请把你工程里的 main 文件夹打成压缩包然后提交
\end{itemize}
\end{enumerate}
\subsection{新浪微博登录界面设计}
\label{sec:orgfbd7e95}
\begin{enumerate}
\item 预期效果
\label{sec:orgbed9b76}
\begin{figure}[htbp]
\centering
\includegraphics[width=0.4\textwidth]{./img/screenshot_20220330_232204.png}
\caption{ 新浪微博登录界面设计 }
\end{figure} 
\item 实践步骤
\label{sec:org58d9ae0}
\begin{enumerate}
\item 新建一个工程Sinlang,选择不创建Activity
\item 创建布局文件activity\_main.xml
\item 将activity设置为垂直类型的线性布局
\item 添加两个TextView组件和EditText组件并设置成登录名和密码样式
\item 添加一个嵌套的水平类型的线性布局，并在布局中添加两个按钮"注册"和
"登录"
\item 添加ListView组件并从数组资源获取数据显示
\end{enumerate}
\end{enumerate}
\subsection{用最新的布局方法挑战实现方式}
\label{sec:org9211916}
\begin{itemize}
\item 使用约束布局的方式实现电话首页设计
\item 使用约束布局的方式实现新浪微博首页设计
\end{itemize}
\subsection{提交实验报告}
\label{sec:orgf6952f5}
\begin{itemize}
\item 提交：按照实验报告模板截图并填写相关的实验说明、实验总结，提交到
学习通上
\item 实验报告的提交组长提交即可，但每个同学都要做实验，组长可以将该小
组做的最好的实验提交
\end{itemize}
\end{document}